<template>
  <view class="wrap">
    <view class="banner-box">
      <kevy-swiper
        :list="bannerList"
        :width="684"
        :height="480"
        :autoPlay="true"
        :autoPlayInterval="5000"
        :showDot="true"
        :descAniType="'slideFromRight'"
        :dotColor="'#E5E6EB'"
        :dotSelectedColor="'#00D1B6'"
      />
    </view>
    <view style="position: relative">
      <view class="questionnaire">
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">自评问卷</text>
        </view>
      </view>
      <view class="list">
        <view class="list-box" @tap="listHandle('5')">
          <view class="list-content">
            <image class="list-image" src="https://ainengli.hzjrsw.com/jkhx/common/srss-icon.png" mode="scaleToFill" />
            <view class="list-main">
              <text class="list-title">睡眠情况自评量表（SRSS）</text>
              <view class="list-desc">
                <text>共10道题目</text>
                <text class="list-space">预计</text>
                <text class="time">5</text>
                <text>分钟完成</text>
              </view>
            </view>
          </view>
          <view class="list-right">
            <image
              class="list-right-image"
              src="https://ainengli.hzjrsw.com/jkhx/common/my-arrow-right.png"
              mode="aspectFill"
            />
          </view>
        </view>
        <view class="list-box" @tap="listHandle('6')">
          <view class="list-content">
            <image
              class="list-image"
              src="https://ainengli.hzjrsw.com/jkhx/weight/ais-icon.png"
              mode="scaleToFill"
            />
            <view class="list-main">
              <text class="list-title">阿森斯失眠量表（AIS）</text>
              <view class="list-desc">
                <text>共8道题目</text>
                <text class="list-space">预计</text>
                <text class="time">4</text>
                <text>分钟完成</text>
              </view>
            </view>
          </view>
          <view class="list-right">
            <image
              class="list-right-image"
              src="https://ainengli.hzjrsw.com/jkhx/common/my-arrow-right.png"
              mode="aspectFill"
            />
          </view>
        </view>
        <view class="list-box" @tap="listHandle('4')">
          <view class="list-content">
            <image
              class="list-image"
              src="https://ainengli.hzjrsw.com/jkhx/weight/isi-icon.png"
              mode="scaleToFill"
            />
            <view class="list-main">
              <text class="list-title">失眠严重程度指数（ISI）</text>
              <view class="list-desc">
                <text>共8道题目</text>
                <text class="list-space">预计</text>
                <text class="time">4</text>
                <text>分钟完成</text>
              </view>
            </view>
          </view>
          <view class="list-right">
            <image
              class="list-right-image"
              src="https://ainengli.hzjrsw.com/jkhx/common/my-arrow-right.png"
              mode="aspectFill"
            />
          </view>
        </view>
        <view class="list-box" @tap="listHandle('7')">
          <view class="list-content">
            <image
              class="list-image"
              src="https://ainengli.hzjrsw.com/jkhx/weight/ess-icon.png"
              mode="scaleToFill"
            />
            <view class="list-main">
              <text class="list-title">Epworth嗜睡量表（ESS）</text>
              <view class="list-desc">
                <text>共8道题目</text>
                <text class="list-space">预计</text>
                <text class="time">5</text>
                <text>分钟完成</text>
              </view>
            </view>
          </view>
          <view class="list-right">
            <image
              class="list-right-image"
              src="https://ainengli.hzjrsw.com/jkhx/common/my-arrow-right.png"
              mode="aspectFill"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import KevySwiper from '@/module/src/components/kevy-swiper.vue'

const bannerList = reactive([
  {
    pageUrl: `/module/src/pages/sleep/relax/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner1.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/breatheHelpsSleep/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner2.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/music/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner3.png`
  }
])

onShow(() => {
  if (uni.hideHomeButton) {
    uni.hideHomeButton()
  }
})

const listHandle = (code: string) => {
  uni.navigateTo({
    url: '/module/src/pages/sleep/sleepAssessment/questionnaire?type=' + code
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100vh;
}

.banner-box {
  width: 100%;
  height: 587rpx;
  padding: 34rpx 32rpx 0;
  background-color: #fff;
}

.questionnaire {
  width: 100%;
  height: 147rpx;
  padding-top: 16rpx;
  padding-left: 32rpx;
  background: linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, #f3f7f8 100%), #fff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;

  .title {
    display: flex;
    align-items: center;

    .title-icon {
      width: 8rpx;
      height: 32rpx;
      margin-right: 16rpx;
      background-color: #00d1b6;
      border-radius: 0 4rpx 4rpx 0;
    }

    .title-text {
      font-size: 36rpx;
      font-weight: 700;
      color: #222;
    }
  }
}

.list {
  position: absolute;
  top: 108rpx;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 0 32rpx 32rpx;

  .list-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 192rpx;
    padding: 0 32rpx;
    margin-bottom: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
  }

  .list-image {
    width: 167rpx;
    height: 128rpx;
    margin-right: 20rpx;
  }

  .list-content {
    display: flex;
  }

  .list-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .list-title {
    margin-bottom: 24rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #222;
  }

  .list-desc {
    font-size: 26rpx;
    font-weight: 400;
    color: #666;

    .list-space {
      margin-left: 16rpx;
    }

    .time {
      color: #00d1b6;
    }
  }
}

.list-right {
  .list-right-image {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>
